<template>
    <div class="shopping-bag">
      <!-- 顶部标题 -->
      <div class="shopping-bag__header">
        <h2>{{cartList.total || 0}} Items in Bag</h2>
        <a href="/user/cart" title="View Shopping Bag" target="_self">View Shopping Bag</a>
      </div>

      <!-- 中间可滚动区域 -->
      <div class="shopping-bag__items" v-if="cartList.data.length > 0">
        <div  class="shopping-bag__item" v-for="(item,index) in cartList.data" :key="index">
          <div class="item__image">
            <img :src="item.sku.image" :alt="item.goods.name">
          </div>
          <div class="item__details">
            <h3 class="item__name">{{ item.goods.name }}</h3>
            <p class="item__size">Size: {{ item.sku.spec?.includes('size:') ? item.sku.spec.split('size:')[1] : '' }}</p>
            <p class="item__quantity">Quantity: {{ item.num }}</p>
            <!-- <p class="item__stock" :class="{ 'in-stock': item.inStock }">
              {{ item.inStock ? 'In Stock' : 'Out of Stock' }}
            </p> -->

          </div>
          <div>
            <p class="item__price">{{ currencyStore.currentCurrency.unit }}{{proxy.$ConvertPrice( item.total ) }}</p>
          </div>

        </div>
      </div>
      <div v-else>
        <div class="shopping-bag__items">
          <div class="shopping-bag__empty">
            <p class="empty__text">Your shopping bag is empty</p>
          </div>
        </div>
      </div>

      <!-- 底部总计和按钮 -->
      <div class="shopping-bag__footer">
        <p class="footer__delivery">Free Shipping over {{ currencyStore.currentCurrency.unit }}{{ proxy.$ConvertPrice(yunPrice) }}</p>
        <div class="footer__total">
          <p class="total__title">Total</p>
          <p class="total__amount">{{ currencyStore.currentCurrency.unit }}{{proxy.$ConvertPrice(cartTotalPrice) }}</p>
        </div>
        <div class="footer__buttons">
          <!-- <button class="btn btn--secondary">View Bag</button> -->
           <a href="/user/cart" title="Checkout" target="_self">
              <button class="btn btn--primary">Checkout</button>
            </a>
        </div>
      </div>
    </div>
  </template>

  <script setup lang="ts">
  import { ref ,getCurrentInstance} from 'vue'
  import { useCurrencyStore } from '@/store/currency'
  import { useRouter } from 'vue-router'
  const router = useRouter()

  const currencyStore = useCurrencyStore()
  const { proxy } = getCurrentInstance()
  const props = defineProps({
    cartList: {
      type: Array,
      default: () => []
    },
    cartTotalPrice: {
      type: Number,
      default: 0
    },
  })
  const yunPrice = ref(99)
  </script>

  <style scoped>
  .shopping-bag {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
    max-width: 600px;
    margin: 0 auto;
    margin-left:-10px;
    background: white;
    border-radius: 8px;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
  }

  .shopping-bag__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #eee;
  }

  .shopping-bag__header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: #333;
  }

  .shopping-bag__header a {
    margin-left: 8px;
    text-decoration: underline;
    box-shadow: none;
    padding: 0;
    background-color: transparent;
    background-image: none;
    border: none;
    transition: color .2s ease;
    display: inline-block;
    letter-spacing: .5px;
    font-size: 1rem;
    text-decoration-skip-ink: none;
  }

  .shopping-bag__items {
    overflow-y: auto;
    /* padding: 1rem; */
  }

  .shopping-bag__item {
    display: flex;
    grid-template-columns: 100px 1fr;
    /* gap: 1rem; */
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
  }

  .item__image img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
  }

  .item__details {
    display: grid;
    gap: 0.2rem;
  }

  .item__name {
    width: 140px;
    margin: 0;
    font-size: 14px;
    color: #333;
    margin-left: 10px;
  }

  .item__size,
  .item__quantity {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
    margin-left: 10px;
  }

  .item__stock {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
  }

  .item__stock.in-stock {
    color: #2e7d32;
    margin-left: 10px;
  }

  .item__price {
    margin: 0;
    font-weight: bold;
    color: #333;
    font-size: 14px;
  }

  .shopping-bag__footer {
    padding: 1rem;
    /*border-top: 1px solid #eee;*/
  }

  .footer__total {
    border-top: 1px solid #eee;
    padding-top: 5px;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
  }
  .total__title{
    font-size: 16px;
    font-weight: 600;
    color: #000;
  }
  .total__amount {
    font-weight: bold;
    font-size: 16px;
    color: #000;
  }

  .footer__delivery {
    color: #183beb;
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }

  .footer__buttons {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
  }

  .btn {
    border: none;
    font-weight: 600;
    cursor: pointer;
    border-radius: 40px;
    padding: 10px 28px;
    transition: background-color 0.2s;
  }

  .btn--primary {
    background-color: #000000;
    color: white;
  }

  .btn--primary:hover {
    background-color: #000000;
  }

  .btn--secondary {
    background-color: #f5f5f5;
    color: #333;
    border:1px solid #000;
  }

  .btn--secondary:hover {
    background-color: #e0e0e0;
  }
  .shopping-bag__empty{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-top: 80px;
  }
  </style>
